<div class="devui-overview-wrapper">
  <div class="d-overview-introduce">
    <h1>
      {{ overviewText.title }}
      <span class="d-overview-total-components">
        {{ totalNumComponents }}
      </span>
    </h1>
    <p class="d-overview-introduce-description">
      {{ overviewText.description }}
    </p>
    <d-search [size]="'lg'" [isKeyupSearch]="true" [placeholder]="overviewText.placeholder" (searchFn)="searchComponent($event)"></d-search>
    <div class="d-overview-filters">
      <div class="d-overview-filters-title">{{ overviewText.filter }}:</div>
      <d-tag
        *ngFor="let tag of tagList; let i = index"
        class="d-overview-filters-item"
        [mode]="'checkable'"
        [checked]="tag.checked"
        [tag]="tag.title"
        [titleContent]="tag.title"
        (checkedChange)="filter(tag.name)"
      ></d-tag>
    </div>
  </div>
  <ul class="d-overview-components" *ngIf="componentsDataDisplay.length">
    <ng-container *ngFor="let components of componentsDataDisplay">
      <li class="d-overview-components-list" *ngIf="!components.nodisplay">
        <div class="d-overview-component-title">
          <h2>
            {{ components.title }}
          </h2>
          <span class="d-overview-component-count">
            {{ components.children.length }}
          </span>
        </div>
        <div class="d-overview-component-wrapper">
          <ng-container *ngFor="let component of components.children">
            <d-card *ngIf="!component.nodisplay" (click)="jumpToComponent(component.link)">
              <div class="d-overview-card-wrapper">
                <d-tag
                  *ngIf="component.newChange"
                  [ngClass]="isOpensource ? '' : 'd-overview-shadow'"
                  [tag]="overviewText.newChange"
                  [labelStyle]="'orange-w98'"
                ></d-tag>
                <d-tag
                  *ngIf="component.sunset"
                  [ngClass]="isOpensource ? '' : 'd-overview-shadow'"
                  [tag]="overviewText.sunset"
                  [labelStyle]="'yellow-w98'"
                ></d-tag>
                <div class="d-overview-card-icon">
                  <img
                    src="{{ imgPrefix + component.folderName + '/' + component.lowerName + '.png' }}"
                    alt=""
                    (error)="imgError($event)"
                  />
                </div>
                <p class="d-overview-card-title">
                  {{ component.title }}
                </p>
                <p *ngIf="component.description" class="d-overview-card-description" [title]="component.description">
                  {{ component.description }}
                </p>
              </div>
            </d-card>
          </ng-container>
          <div class="d-component-place-holder" *ngFor="let placeHolder of flexPlaceHolders"></div>
        </div>
      </li>
    </ng-container>
  </ul>
  <div class="d-overview-no-data" *ngIf="!componentsDataDisplay.length">
    <img *ngIf="!nowFilter" class="d-overview-no-data-img" src="./{{ srcPrefix }}/no-data{{ darkMode }}.svg" alt="no-data" />
    <div class="d-overview-no-data-wrap">
      <div *ngIf="componentsLooking && componentsLooking.length">
        <h2 class="d-overview-no-data-title">
          {{ overviewText.lookingCmp }}
        </h2>
        <div class="d-overview-no-data-list d-overview-component-wrapper">
          <d-card *ngFor="let component of componentsLooking" (click)="jumpToComponent(component.link)">
            <div class="d-overview-card-wrapper">
              <d-tag
                *ngIf="component.newChange"
                [ngClass]="isOpensource ? '' : 'd-overview-shadow'"
                [tag]="overviewText.newChange"
                [labelStyle]="'orange-w98'"
              ></d-tag>
              <d-tag
                *ngIf="component.sunset"
                [ngClass]="isOpensource ? '' : 'd-overview-shadow'"
                [tag]="overviewText.sunset"
                [labelStyle]="'yellow-w98'"
              ></d-tag>
              <div class="d-overview-card-icon">
                <img src="{{ imgPrefix + component.folderName + '/' + component.lowerName + '.png' }}" alt="" (error)="imgError($event)" />
              </div>
              <p class="d-overview-card-title">
                {{ component.title }}
              </p>
              <p *ngIf="component.description" class="d-overview-card-description" [title]="component.description">
                {{ component.description }}
              </p>
            </div>
          </d-card>
          <div class="d-component-place-holder" *ngFor="let placeHolder of flexPlaceHolders"></div>
        </div>
      </div>

      <div *ngIf="componentsSuggest && componentsSuggest.length">
        <h2 class="d-overview-no-data-title">
          {{
            nowFilter === 'newChangeCmps'
              ? overviewText.newChangeCmps
              : nowFilter === 'recentlySuggestCmps'
              ? overviewText.recentlySuggestCmps
              : overviewText.suggestCmp
          }}
        </h2>
        <div class="d-overview-no-data-list d-overview-component-wrapper">
          <d-card *ngFor="let component of componentsSuggest" (click)="jumpToComponent(component.link)">
            <div class="d-overview-card-wrapper">
              <d-tag
                *ngIf="component.newChange"
                [ngClass]="isOpensource ? '' : 'd-overview-shadow'"
                [tag]="overviewText.newChange"
                [labelStyle]="'orange-w98'"
              ></d-tag>
              <d-tag
                *ngIf="component.sunset"
                [ngClass]="isOpensource ? '' : 'd-overview-shadow'"
                [tag]="overviewText.sunset"
                [labelStyle]="'yellow-w98'"
              ></d-tag>
              <div class="d-overview-card-icon">
                <img src="{{ imgPrefix + component.folderName + '/' + component.lowerName + '.png' }}" alt="" (error)="imgError($event)" />
              </div>
              <p class="d-overview-card-title">
                {{ component.title }}
              </p>
              <p *ngIf="component.description" class="d-overview-card-description" [title]="component.description">
                {{ component.description }}
              </p>
            </div>
          </d-card>
          <div class="d-component-place-holder" *ngFor="let placeHolder of flexPlaceHolders"></div>
        </div>
      </div>
    </div>
  </div>
</div>
